<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <el-form
              :model="dataDict"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
              :rules="rules"
              ref="dataDict"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.dict_dictText')" prop="dictText">
                    <el-input v-model="dataDict.dictText"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.dict_dictKey')" prop="dictKey">
                    <el-input v-model="dataDict.dictKey"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.system_data_dict')" prop="systemDataDict">
                    <el-radio-group v-model="dataDict.systemDataDict">
                      <el-radio v-for="(item, index) in systemDataDicts"  :key="index" :label="item.value">{{$t(item.label)}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="dataDict.dictGroupKey == 'QRcode'">

                    <el-form-item :label="图片上传">

                  <FileUploadCommon
                    @uploadSuccess="uploadSuccess"
                    @uploadRemove="uploadRemove"
                    :fileList="fileList"
                    :limit="1"
                  >
                  </FileUploadCommon>
                    </el-form-item>

                </el-col>
              </el-row>
            </el-form>
          </div>
        </PageEditCollapse>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('dataDict')" :loading="submiting" class="loading-submiting">
            {{$t('cm.commit')}}
          </el-button>
          <el-button type="primary" @click="toList">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import HasBtn from '@/mixins/HasBtn'
import { mapState, mapActions } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import sys_manage from '@/api/sys_manage'
import Submiting from '@/mixins/Submiting'
import FileUploadCommon from '@/components/common/FileUploadCommon'
export default {
  components: {
    PageTemplate, PageEditCollapse,FileUploadCommon
  },
  mixins: [Submiting],
  data () {
    return {
    fileList:[],
      dataDict: {
        id: null,
        dictGroupKey: null,
        dictText: null,
        dictKey: null,
        systemDataDict: Constant.SYSTEM_DATA_DICT_Y.value,
        orderIndex: 1,
        lang: 'zh_CN',
        isValid: 'Y'
      },
      rules: {
        dictText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        dictKey: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        systemDataDict: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      systemDataDicts: [Constant.SYSTEM_DATA_DICT_Y, Constant.SYSTEM_DATA_DICT_N]
    }
  },
  created () {
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.dataDict.dictGroupKey = this.$router.history.current.params.id
      if (this.$router.history.current.params._id) {
        this.dataDict.id = this.$router.history.current.params._id
        this.sysDictLoadByPaging(this.dataDict.dictGroupKey)
      }
      let indexs = JSON.parse(JSON.stringify(this.curIndexName))
      indexs[2].index = `${Constant.ROUTE_SYS_DICT.index}/${this.dataDict.dictGroupKey}`
      this.changeIndexName(indexs)
    }
  },
  methods: {
    ...mapActions('common', [
      'changeIndexName'
    ]),
    sysDictLoadByPaging (id) {
      sys_manage.sysDictLoadByPaging({dictGroupKey: id}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          if (result.data && result.data.length > 0) {
            for (let i = 0; i< result.data.length; i++) {
              if ( this.dataDict.id == result.data[i].id) {
                this.dataDict.dictText =  result.data[i].dictText
                this.dataDict.dictKey =  result.data[i].dictKey
              }
            }
          }
          this.tables = result.data
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    submitForm (formName) {
      this.openSubmiting()
      let d = [this.dataDict]
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          sys_manage.sysDictSave(d, result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
            this.closeSubmiting()
          })
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_SYS_DICT.index, this.$router, { id: this.dataDict.dictGroupKey })
    },
    uploadRemove (fileList, fileKey) {
          let resList = fileList.map(item => {
            return {
              name: item.name,
              url: item.url,
              fileId: item.fileId
            }
          })
          this.fileList = resList
     },
     uploadSuccess (res, fileKey) {
           if (res.data && res.data[0]) {
             let file = {name: res.data[0].fileName, url: res.data[0].url, fileId: res.data[0].fileId}
             this.fileList.push(file)
             if(res.data[0].url.length>0){
              this.dataDict.dictKey=res.data[0].url
             }

           }
         }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      curIndexName: state => state.common.curIndexName
    })
  }
}
</script>

<style lang="scss">
</style>
